<template>
  <!--电子金使用记录-->
  <div>
    <div class="search" v-if="type==2">
      <p>
        <input type="text" placeholder="会员卡号搜索" v-model="vipCardNo">
        <img src="../../assets/search.png" alt="" width="16" @click="goSearch()">
      </p>
    </div>
    <p><span style="margin-left:10px;">使用总次数：{{totalNum}}</span></p>
    <div class="page-infinite-wrapper" ref="wrapper" :style="{ height: wrapperHeight + 'px' }">
      <wv-group
        v-infinite-scroll="getList"
        infinite-scroll-disabled="loading"
        infinite-scroll-distance="10"
      >
        <ul class="list">
          <li v-for="(item,index) in useList">
            <ul>
              <li>会员姓名：{{item.UName}}</li>
              <li>会员电话：{{item.UMobile}}</li>
              <li>开卡地区：{{item.CCity}}</li>
              <li>使用电子金：{{item.Balance}}</li>
              <li>电子金余额：{{item.DiscountNum}}</li>
              <li>会员卡号：{{item.VipNum}}</li>
              <li>证件号：{{item.CerNum}}</li>
              <li>使用时间：{{item.CreateTime}}</li>
              <li>所属销售：{{item.CompanyPromoter}}</li>
            </ul>
          </li>
        </ul>
      </wv-group>
    </div>

  </div>
</template>

<script type="text/ecmascript-6">
  import {getDianziJinRecordList} from '../../../test/unit/http'
  import {Toast} from 'we-vue'

  export default {
    name: 'checkrecord',
    props: {},
    data() {
      return {
        type: 1,
        vipCardNo: '',
        totalNum: 0,
        useList: [],
        wrapperHeight: 0,
        page: 1,
        rows: 5,
        loading: false
      };
    },
    methods: {
      goSearch() {
        if (this.$myUtils.isNull(this.vipCardNo)) {
          Toast.text("请输入会员卡号");
          return
        }
        this.loading = false;
        this.page = 1;
        this.useList = [];
        this.getList()
      },
      getList() {
        let params = {
          page: this.page,
          rows: this.rows,
          vipCardNo: this.vipCardNo
        };
        this.getData(params);
      },
      getData(params) {
        this.loading = true;
        getDianziJinRecordList(params).then(res => {
          console.log(res);
          if (res.code == 100) {
            let data = res.object;
            let list = data.rows;
            let pages = data.pages;
            this.pages = pages;
            let totalNum = data.total;
            this.totalNum = totalNum;
            if (list.length > 0) {
              this.useList = this.useList.concat(list);
            }
            if (this.page < this.pages) {
              this.page++;
              this.loading = false
            } else {
              this.loading = true
            }
          } else {
            Toast.fail(res.info)
          }
        })
      }
    },
    created() {
      let type = this.$route.query.type;
      this.type = type;
      if (type == 1) {
        let vipCardNo = this.$route.query.vipCardNo;
        this.vipCardNo = vipCardNo
      } else {
        this.loading = true
      }
    },
    components: {}
  }
</script>


<!-- Add "scoped" attribute to limit CSS to this component only -->
<style scoped lang="less" rel="stylesheet/less">
  .search {
    position: relative;
    width: 95%;
    margin: 10px auto;
    display: flex;

    input {
      width: 92%;
      border: 1px solid #eee;
      box-shadow: 0 3px 4px rgba(17, 17, 17, 0.05);
      border-radius: 7px;
      height: 25px;
      line-height: 25px;
      padding: 10px;
      color: #111;
    }

    .searchicon {
      position: absolute;
      right: 20px;
      top: 16px;
    }

    p {
      flex: 0 100%;
      position: relative;
      margin-right: 5px;

      img {
        position: absolute;
        right: 20px;
        top: 16px;
      }
    }

  }

  .list {
    > li {
      margin: 15px 10px;
      text-align: left;
      border-bottom: 1px solid #ddd;
      font-size: 13px;

      li {
        margin-bottom: 10px;
      }

      li:first-child {
        color: #111;
        font-weight: 700;
      }

      li:nth-child(2) {
        line-height: 35px;
        height: 35px;
        color: #111;
        font-weight: 700;

        span {
          font-size: 15px;
          float: right;
          color: #f98e3c;
        }

        .weiguo {
          color: #2d93f0;
        }

        .no {
          color: #e96673;
        }
      }

      li:nth-child(3) {
        font-size: 12px;
        color: #666;
        text-align: left;

        span {
          font-size: 15px;
          float: right;
          color: #f98e3c;
        }
      }

      li:nth-child(4) {
        font-size: 12px;
        color: #666;
        display: flex;
        text-align: left;

        img {
          margin-right: 5px;
        }

        p {
          flex: 1;
        }
      }

      li:nth-child(4) {
        text-align: left;

        img {
          vertical-align: text-bottom;
        }

        p:last-child {
          text-align: right;
        }
      }

      li:last-child {
        img {
          vertical-align: middle;
        }

        span {
          color: #f98e3c;
          font-size: 15px;
          text-align: right;
        }
      }
    }

    > li:last-child {
      border-bottom: none;
    }

  }

</style>


